<template>
    <div class="headerstepstop">
        <div class="headersteps">
            <el-steps :style="{
                width: '900px',
                '--el-color-primary': '#000',
            }" :active="active" align-center>
                <el-step class="cu" v-for="(v, k) in list" :key="k" @click="click(k, v.title)" :title="v.title"
                    :status="successstatus[k]" :description="v.description">
                    <template #icon>{{ k + 1 }}</template>
                </el-step>
            </el-steps>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { EMstatus } from '../../interface';
type Isuccessstatus = EMstatus[]
type Ilist = {
    title: string;
    description: string;
}
const p = defineProps<{ successstatus: Isuccessstatus, submit: (num?: string) => void, list: Ilist[] }>()
const active = ref(0)
function click(k: number, str: string) {
    active.value = k
    p.submit(str)
}

</script>

<style scoped>
.headersteps {
    width: 900px;
    margin: 0 auto;
    transform: translateX(0px);
    transition: transform 0.3s;
    padding-bottom: 8px;
}

.headerstepstop {
    transform: translateX(0px);
}

.headerstepstop::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.el-tabs__active-bar {
    width: 225px;
    z-index: 10;
}
</style>

<style>
.headersteps {
    --main-font-weight: bold;
    --el-color-success: #67c23a;
    --success: var(--color-cheng);
    --finish: var(--el-color-success);
}

.headersteps .el-step__head {
    --bg-color: #000;
}

/* 成功 */
.headersteps .el-step__head.is-success {
    --bg-color: var(--success)
}

/* 选中 */
.headersteps .el-step__head.is-finish {
    --bg-color: var(--finish);
}

/* 未填写 */
.headersteps .el-step__head.is-wait {
    --bg-color: var(--el-text-color-placeholder);
}

.headersteps .el-step__icon {
    background-color: var(--bg-color);
    color: #fff;
    border-color: var(--bg-color) !important;
    border-radius: 50%;
    width: 24px !important;
}

.headersteps .el-step__title {
    font-size: 14px;
    font-weight: bold;
}

.headersteps .el-step__title.is-finish {
    color: var(--finish) !important;
}

.headersteps .el-step__title.is-success {
    font-weight: normal;
    color: var(--success) !important;
}

.headersteps .el-step__description.is-success {
    color: var(--success) !important;
    font-size: 12px;
}

.headersteps .el-step__description.is-finish {
    color: var(--finish) !important;
}

.headersteps .el-step__line {
    display: none;
}
</style>